<template>
  <view class="container">
	<view class="mine_header " :style="{'padding-top':'calc(' + statusBarHeight + ' + 84rpx)'}">
		  <view class="userInfo flex_row_between_center" v-if="memberSliding==false">
			  <view class="flex_row_start_center userInfo_left">
			  	<image :src="userCenterData.memberAvatar" mode="aspectFit" class="userInfo_image"></image>
			    <view v-if="userCenterData &&(userCenterData.memberMobile )">
					<view>{{userCenterData.memberMobile }}</view>
					<view class="userInfo_left_label">普通用户</view>
				</view>
				<view v-if="(!userCenterData ||(userCenterData && !userCenterData.memberId)) "
				     @click="navTo('/pages/public/login')">登录</view>
			  </view>
			  <view class="flex_row_start_center userInfo_right" @click="navTo('/pages/mine/info')">
			  	<view >个人中心</view>
			  	<view class="lg text-white cuIcon-right" style="margin-top: 4rpx;" ></view>
			  </view>
		  </view>
		<view class="mine_module">
			<view class="mine_module_top flex_row_between_center">
				<view class="mine_module_top_left">我的</view>
				<!-- <view class="flex_row_start_center mine_module_top_right">
					<view>开通会员可享多种特权</view>
					<view class="lg text-gray cuIcon-right" style="margin-top: 4rpx;margin-left: 20rpx;" ></view>
				</view> -->
			</view>
			<view class="mine_module_bottom flex_row_between_center">
				<!-- <view class="mine_module_item" @click="getToast">
					<image src="../../static/images/other/order.png" mode="aspectFit" class="moduleImage"></image>
					<view  class="mine_module_item_name">我的订单</view>
				</view> -->
				<view class="mine_module_item" @click="getToast">
					<image src="../../static/images/other/courseware.png" mode="aspectFit" class="moduleImage"></image>
					<view class="mine_module_item_name">我的课件</view>
				</view>
				<view class="mine_module_item" @click="getToast">
					<image src="../../static/images/other/collect.png" mode="aspectFit" class="moduleImage"></image>
					<view  class="mine_module_item_name">我的收藏</view>
				</view>
				<!-- <view class="mine_module_item" @click="getToast">
					<image src="../../static/images/other/wallet.png" mode="aspectFit" class="moduleImage"></image>
					<view  class="mine_module_item_name">我的钱包</view>
				</view> -->
			</view>
		</view>
	</view>
	<view class="mine_nav" v-if="memberSliding==true" :style="{'padding-top':'calc(' + statusBarHeight + ' + 24rpx)'}">
		<view class="member_info_sliding_left flex_row_start_center">
			<image src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/logo.png"  class="userInfo_image"
				mode="aspectFill"></image>
			<text v-if="userCenterData &&  userCenterData.memberMobile">
				{{  userCenterData.memberMobile }}</text>
			<text v-else>登录</text>
		</view>
	</view>
	<view class="menber" @click="getToast">
		<image src="../../static/images/other/9fdhgotv.png" mode="aspectFill" class="menberImage"></image>
	</view>
	<view class="mine_list" >
		
		<view class="mine_list_item flex_row_between_center" @click="getToast">
			<view class="flex_row_start_center">
				<image src="../../static/images/other/record.png" mode="aspectFit" class="list_item_icon"></image>
				<view>观看记录</view>
			</view>
			<view class="lg text-gray cuIcon-right" style="margin-top: 4rpx;margin-left: 20rpx;" ></view>
		</view>
		<!-- <view class="mine_list_item flex_row_between_center" @click="navTo('/pages/invite/invite')" >
			<view class="flex_row_start_center">
				<image src="../../static/images/other/record.png" mode="aspectFit" class="list_item_icon"></image>
				<view>邀请好友</view>
			</view>
			<view class="lg text-gray cuIcon-right" style="margin-top: 4rpx;margin-left: 20rpx;" ></view>
		</view> -->
		<!-- <view class="mine_list_item flex_row_between_center" @click="getToast">
			<view class="flex_row_start_center">
				<image src="../../static/images/other/member.png" mode="aspectFit" class="list_item_icon"></image>
				<view>我的会员</view>
			</view>
			<view class="lg text-gray cuIcon-right" style="margin-top: 4rpx;margin-left: 20rpx;" ></view>
		</view> -->
		<!-- <view class="mine_list_item flex_row_between_center" >
			<view class="flex_row_start_center">
				<image src="../../static/images/other/cart.png" mode="aspectFit" class="list_item_icon"></image>
				<view>地址管理</view>
			</view>
			<view class="lg text-gray cuIcon-right" style="margin-top: 4rpx;margin-left: 20rpx;" ></view>
		</view> -->
		<!-- <view class="mine_list_item flex_row_between_center" >
			<view class="flex_row_start_center">
				<image src="../../static/images/other/kefu.png" mode="aspectFit" class="list_item_icon"></image>
				<view>联系客服</view>
			</view>
			<view class="lg text-gray cuIcon-right" style="margin-top: 4rpx;margin-left: 20rpx;" ></view>
		</view> -->
		<view class="mine_list_item flex_row_between_center"   @click="navTo('/pages/set/set')">
			<view class="flex_row_start_center">
				<image src="../../static/images/other/set.png" mode="aspectFit" class="list_item_icon"></image>
				<view>系统设置</view>
			</view>
			<view class="lg text-gray cuIcon-right" style="margin-top: 4rpx;margin-left: 20rpx;" ></view>
		</view>
	</view>
		<loginPop ref="loginPop" @confirmLogin="confirmLogin"></loginPop>
	
  </view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
  export default {
    data() {
      return {
		  statusBarHeight:uni.getSystemInfoSync().statusBarHeight+'px',
		  memberSliding:false,
      }
    },
    onLoad(){
		console.log(this.hasLogin);
	},
	//监听页面滚动，顶部上滑效果显示
	onPageScroll(res) {
		if (res.scrollTop > 120) {
			this.memberSliding = true
		} else {
			this.memberSliding = false
		}
		// console.log('this.memberSliding',this.memberSliding);
	},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'userCenterData'])
	},
    methods: {
       navTo(url){
		   if(!this.hasLogin){
			   this.$refs.loginPop.openLogin()
			   return false
		   }
		   this.$tab.navigateTo(url)
	   },
	   //提示
	   getToast(){
	   	this.$modal.msg('该功能待开发')
	   },
  
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f2f7fd;
	
  }
  
  .container{
	  height: 100%;
	  padding-bottom: 50rpx;
	  // background-color: red;
  }
  .mine_nav{
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 750rpx;
	  // height: 250rpx;
	  padding: 0 30rpx 10rpx 20rpx;
	  background-color: #a76252;
	  
	  .member_info_sliding_left {
	  	text {
	  		margin-left: 20rpx;
	  		font-size: 30rpx;
	  		font-family: PingFang SC;
	  		font-weight: bold;
	  		color: #010101;
	  	}
	  
	  	image {
	  		width: 78rpx;
	  		height: 78rpx;
	  		border: 4rpx solid rgba(255, 255, 255, 0.5);
	  		border-radius: 50%;
	  	}
	  }
  }

  .mine_header {
	  width: 750rpx;
      height: 440rpx;
      border-radius: 0rpx 0rpx 36rpx 36rpx;
      background: #a76252;
	  position: relative;
  }
  .userInfo{
	  padding: 0 38rpx 0 52rpx;
	
	  .userInfo_left{
		  font-size: 36rpx;
		  color:#fff;
		 
		  
		  .userInfo_image{
		  	  width: 100rpx;
		  	  height: 100rpx;
		  	  border-radius: 50%;
		  	  background-color: #c4c4c4;
			  margin-right: 24rpx;
		  }
		  .userInfo_left_label{
				font-size: 20rpx;
				width: 104rpx;
				height: 38rpx;
				border-radius: 24rpx;
				background: #ffffff33;
				display: flex;
				align-items: center;
				justify-content: center;
		  }
	  }
		  
	  .userInfo_right{
		  font-size: 28rpx;
		  color: #fff;
		
	  }
  }

 
   .mine_module{
	   position: absolute;
	   left: 0;
	   bottom: -150rpx;
	   width: 678rpx;
	   margin:36rpx 32rpx 0 32rpx ;
	   border-radius: 16rpx;
	   
	   .mine_module_top{
		   height: 86rpx;
		   padding: 0 20rpx;
		   background-color: #ffe7c2;
		   border-radius: 16rpx 16rpx 0 0;
		   .mine_module_top_left{
			   font-size: 28rpx;
			   color: #634D37;
			   font-weight: bold;
		   }
		   .mine_module_top_right{
			   font-size: 28rpx;
			   color: #634D37;
		   }
	   }
	   .mine_module_bottom{
		   background-color: #fff;
		   height: 190rpx;
		   padding: 0 38rpx;
		   border-radius:0 0 16rpx 16rpx;
		   
		   .mine_module_item{
			   text-align: center;
			   color: #313131;
			   font-size: 28rpx;
			   
			   .mine_module_item_name{
				   margin-top: 20rpx;
			   }
		   }
	   }
   }

  .moduleImage{
	  width: 64rpx;
	  height: 64rpx;
  }
  
  .menber{
	margin: 180rpx 34rpx 0rpx 32rpx;
  }
  .menberImage{
	  width: 684rpx;
	  height: 144rpx;
	  border-radius: 16rpx;
  }
  
  .mine_list{
	  margin: 20rpx 30rpx 0rpx 30rpx;
	  background-color: #fff;
	  border-radius:16rpx;
	  padding: 0 48rpx;
	  
	  .mine_list_item{
		  height: 108rpx;
		  border-bottom: 2rpx solid #F6F6F6;
		  color: #313131;
		  font-size: 28rpx;
		  
		  .list_item_icon{
			  width: 36rpx;
			  height: 36rpx;
			  margin-right: 24rpx;
		  }
	  }
	  
  }
</style>
